<template>
  <card class="add-info-card" title="交车信息" toggle v-if="orderDetails.giveCarInfoDto">
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="交车时间">{{ orderDetails.giveCarInfoDto.giveCarTime }}</a-descriptions-item>
          <a-descriptions-item label="交车人">{{ orderDetails.giveCarInfoDto.giveStaffName }}</a-descriptions-item>
          <a-descriptions-item label="交车里程">{{ unitVal(orderDetails.giveCarInfoDto.giveCarMileage, '公里') }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="交车油（电）量">{{
            orderDetails.giveCarInfoDto.giveFuelAmount || '-'
          }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="交车照片">
            <upload-img v-model="orderDetails.giveCarInfoDto.giveFileIds" disabled margin />
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="交车视频">
            <upload-video v-model="orderDetails.giveCarInfoDto.giveVideoFileIds" :max="1" disabled />
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="交车备注">{{ orderDetails.giveCarInfoDto.remark }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
  <card class="add-info-card" title="还车信息" toggle :showDivider="false" v-if="orderDetails.returnCarInfoDto">
    <div class="section-item">
      <div class="section-item-content">
        <a-descriptions :size="'medium'" :align="{ label: 'right' }">
          <a-descriptions-item label="还车时间">{{ orderDetails.returnCarInfoDto.returnCarTime }}</a-descriptions-item>
          <a-descriptions-item label="还车人">{{ orderDetails.returnCarInfoDto.returnStaffName }}</a-descriptions-item>
          <a-descriptions-item label="还车里程">{{ unitVal(orderDetails.returnCarInfoDto.returnCarMileage, '公里') }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="还车油（电）量">{{
            orderDetails.returnCarInfoDto.returnFuelNum || '-'
          }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="还车照片">
            <upload-img v-model="orderDetails.returnCarInfoDto.returnFileIds" disabled margin />
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="还车视频">
            <upload-video v-model="orderDetails.returnCarInfoDto.returnVideoFileIds" :max="1" disabled />
          </a-descriptions-item>
          <a-descriptions-item :span="3" label="还车备注">{{ orderDetails.returnCarInfoDto.useEndRemark }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </card>
  <a-empty style="margin-top: 20vh" v-if="!orderDetails.giveCarInfoDto" />
</template>

<script setup name="GiveReturnCar">
  import { unitVal } from '@/utils'
  import { onMounted, ref } from 'vue'
  import { getLongOrderDetails } from '@/api/order/czsOrder'

  const orderDetails = ref({
    contractList: [],
  })
  const props = defineProps({
    orderId: Number,
  })
  const getDetails = () => {
    getLongOrderDetails({ id: props.orderId }).then((res) => {
      orderDetails.value = res.result.orderInfo
      if (!orderDetails.value.contractList) {
        orderDetails.value.contractList = []
      }
    })
  }

  onMounted(() => {
    getDetails()
  })
</script>

<style lang="less" scoped>
  .member-name {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    .no-card {
      background: #1890ff;
      color: #fff;
      font-size: 14px;
      border-radius: 2px;
      padding: 2px 8px;
    }
  }
  .cont-list {
    background: rgba(247, 248, 250, 0.5);
    padding: 16px 0 14px;
    margin-bottom: 16px;
  }
</style>
